<template>
    <div class="container">
        <statistics-header header-title="入 境 人 员 数 据 库"></statistics-header>
        <statistics-bar bar-type="immigration"></statistics-bar>
        <div class="report-content">
            <div class="search-group">
<!--                <div class="left-content">-->
<!--                    <div class="data-title">数据库信息</div>-->
<!--                    <dlq-search @search="search"></dlq-search>-->
<!--                </div>-->
<!--                <div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <div class="item">
                    <div id="chart1" class="chart-item"></div>
                </div>
            </Row>
            <br>
<!--            <Row type="flex" justify="center">-->
<!--                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"-->
<!--                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>-->
<!--            </Row>-->
        </div>
    </div>
</template>
<script>
import {
  findrjryList
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
// import DlqSearch from '@/components/search'
import echarts from 'echarts'
export default {
  components: {
    StatisticsBar,
    StatisticsHeader
    // DlqSearch
  },
  data () {
    return {
      totalnum: 0,
      typeNumObj: [
      ],
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableData: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  computed: {},
  mounted () {
    this.init()
    this.chart1()
  },
  methods: {
    chart1 (data) {
      let myChart = echarts.init(document.getElementById('chart1'))
      // 指定图表的配置项和数据

      let posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ]

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: echarts.util.reduce(posList, function (map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }

      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          let labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance
            }
          }
          myChart.setOption({
            series: [{
              label: labelOption
            }, {
              label: labelOption
            }, {
              label: labelOption
            }, {
              label: labelOption
            }]
          })
        }
      }

      let labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: '#fff'
          }
        }
      }

      let option = {
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '0',
          top: '20%',
          containLabel: true
        },
        legend: {
          data: ['入境人员总数', '在沈人员总数', '转运省内人员数量'],
          top: '40'
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['和平区', '沈河区', '铁西区', '皇姑区', '大东区', '浑南区', '于洪区', '沈北新区', '苏家屯区', '辽中区', '新民市', '法库县', '康平县']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '入境人员总数',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '在沈人员总数',
            type: 'bar',
            label: labelOption,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '转运省内人员数量',
            type: 'bar',
            label: labelOption,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
      let _this = this
      myChart.on('click', function (params) {
        console.log(params.name)
        _this.$router.push({
          name: 'statImmigration',
          query: { areaName: params.name }
        })
      })
    },
    search (value) {
      this.pageObj.pageNo = 1
      this.init(value)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        // place_type: this.$common.xeUtils.trim(this.searchObj.place_type),
        ...data
      }
      this.tableLoading = true
      findrjryList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          // for (let i = 0; i < data.data.results.length; i++) {
          // data.data.results[i].samplingDate = this.getDate(data.data.results[i].sampling_date)
          // data.data.results[i].imp_date = this.getDate(data.data.results[i].imp_date)
          // }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .county-group {
        display: flex;
        align-items: center;
    }
    .search-group {
        /*padding: 10px 0;*/
        /*border-bottom: 1px solid #efefef;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }
    .ivu-form-item{
        margin-bottom: 10px;
    }
    .ivu-col.ivu-col-span-6{
        width: 20%;
    }
    .record-num {
        margin-right: 140px;
    }
    .main-table {
        margin-top: -45px;
    }
    .tt {
        display: flex;
        align-items: center;
        padding-top: 10px;
    }
    .chart-item{
        width: 100%;
        height: 600px;
    }
</style>
